<section class="sign-up">
  <div class="title full-width">KITTEN CHAT</div>
  <form [formGroup]="signUpForm">
    <mat-form-field appearance="standard">
      <mat-icon matPrefix>person</mat-icon>
      <input
        matInput
        type="text"
        placeholder="your username"
        formControlName="username"
      />
    </mat-form-field>
    <mat-form-field appearance="standard">
      <mat-icon matPrefix>face</mat-icon>
      <input
        matInput
        type="text"
        placeholder="your nick name"
        formControlName="nickName"
      />
    </mat-form-field>
    <mat-form-field appearance="standard">
      <mat-icon matPrefix>lock</mat-icon>
      <input
        matInput
        [type]="showPass ? 'text' : 'password'"
        placeholder="your password"
        formControlName="password"
      />
      <button
        mat-icon-button
        matSuffix
        type="button"
        (click)="showPass = !showPass"
        [attr.aria-pressed]="!showPass"
      >
        <mat-icon>
          {{ showPass ? "visibility" : "visibility_off" }}
        </mat-icon>
      </button>
    </mat-form-field>
    <mat-form-field appearance="standard">
      <mat-icon matPrefix>lock</mat-icon>
      <input
        matInput
        [type]="showPassRepeat ? 'text' : 'password'"
        placeholder="repeat your password"
        formControlName="passwordRepeat"
      />
      <button
        mat-icon-button
        matSuffix
        type="button"
        (click)="showPassRepeat = !showPassRepeat"
        [attr.aria-pressed]="!showPass"
      >
        <mat-icon>
          {{ showPassRepeat ? "visibility" : "visibility_off" }}
        </mat-icon>
      </button>
    </mat-form-field>
  </form>
  <div class="full-width">
    <button type="button" mat-flat-button color="primary" (click)="onSignUp()">注册</button>
    <button type="button" mat-button color="accent" routerLink="/auth">有帐号，去登录</button>
  </div>
</section>
